<!-- 全局背景组件 -->
<template>
  <div class="global-background">
    <!-- 星空背景 -->
    <div class="stars">
      <div v-for="n in 50" :key="n" class="star"></div>
    </div>
    
    <!-- 动态光环 -->
    <div class="light-rings">
      <div v-for="n in 3" :key="n" class="ring" :class="'ring-' + n"></div>
    </div>
    
    <!-- 装饰线条 -->
    <div class="decoration-lines">
      <div v-for="n in 10" :key="n" class="line" :class="'line-' + n"></div>
    </div>
    
    <!-- 浮动形状 -->
    <div class="floating-shapes">
      <div v-for="n in 10" :key="n" class="shape" :class="'shape-' + n"></div>
    </div>
    
    <!-- 网格背景 -->
    <div class="grid-background"></div>

    <!-- 模糊背景 -->
    <div class="blur-overlay"></div>

    <!-- 内容插槽 -->
    <div class="content-wrapper">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

// 在mounted时动态生成星星位置
onMounted(() => {
  const stars = document.querySelectorAll('.star')
  stars.forEach(star => {
    star.style.left = `${Math.random() * 100}%`
    star.style.top = `${Math.random() * 100}%`
    star.style.animationDelay = `${Math.random() * 4}s`
  })
})
</script>

<style scoped>
.global-background {
  min-height: 100vh;
  background-color: #1a1a1a;
  position: relative;
  overflow: hidden;
}

.content-wrapper {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), transparent);
}

/* 星空背景 */
.stars {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle var(--duration, 4s) infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* 动态光环 */
.light-rings {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.ring {
  position: absolute;
  border: 2px solid rgba(107, 70, 193, 0.1);
  border-radius: 50%;
  animation: expand 10s infinite;
}

.ring-1 {
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 0s;
}

.ring-2 {
  width: 800px;
  height: 800px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -3s;
}

.ring-3 {
  width: 1000px;
  height: 1000px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -6s;
}

@keyframes expand {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
}

/* 装饰线条 */
.decoration-lines {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(107, 70, 193, 0.2), transparent);
  height: 1px;
  width: 100%;
  animation: moveLine 8s linear infinite;
}

@keyframes moveLine {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* 为星星和线条生成随机位置和动画延迟 */
.star:nth-child(3n) { --duration: 3s; }
.star:nth-child(3n+1) { --duration: 4s; }
.star:nth-child(3n+2) { --duration: 5s; }

.line:nth-child(5n) { animation-delay: 0s; top: 20%; }
.line:nth-child(5n+1) { animation-delay: -1.6s; top: 40%; }
.line:nth-child(5n+2) { animation-delay: -3.2s; top: 60%; }
.line:nth-child(5n+3) { animation-delay: -4.8s; top: 80%; }
.line:nth-child(5n+4) { animation-delay: -6.4s; top: 90%; }

/* 网格背景 */
.grid-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(107, 70, 193, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 70, 193, 0.2) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.15;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: center top;
  animation: gridMove 20s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* 浮动形状 */
.floating-shapes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: -2;
}

.shape {
  position: absolute;
  background: rgba(107, 70, 193, 0.02);
  backdrop-filter: none;
  border-radius: 50%;
  animation: float 30s infinite;
  border: 1px solid rgba(107, 70, 193, 0.03);
  box-shadow: none;
}

/* Shape positions and sizes */
.shape-1 { width: 200px; height: 200px; left: -10%; top: -10%; opacity: 0.03; }
.shape-2 { width: 180px; height: 180px; right: -8%; top: 5%; opacity: 0.02; }
.shape-3 { width: 250px; height: 250px; left: 15%; bottom: -15%; opacity: 0.03; }
.shape-4 { width: 150px; height: 150px; right: 20%; bottom: 10%; opacity: 0.02; }
.shape-5 { width: 220px; height: 220px; left: 8%; top: 25%; opacity: 0.02; }
.shape-6 { width: 190px; height: 190px; right: 12%; top: -12%; opacity: 0.03; }
.shape-7 { width: 160px; height: 160px; left: 30%; top: 8%; opacity: 0.02; }
.shape-8 { width: 140px; height: 140px; right: 25%; bottom: 18%; opacity: 0.02; }
.shape-9 { width: 230px; height: 230px; left: -5%; bottom: 22%; opacity: 0.03; }
.shape-10 { width: 170px; height: 170px; right: -6%; bottom: -8%; opacity: 0.02; }

/* Shape gradients */
.shape-1, .shape-3, .shape-5, .shape-7, .shape-9 {
  background: radial-gradient(circle at center, rgba(107, 70, 193, 0.04), transparent);
}

.shape-2, .shape-4, .shape-6, .shape-8, .shape-10 {
  background: radial-gradient(circle at center, rgba(128, 90, 213, 0.03), transparent);
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.02;
  }
  25% {
    transform: translate(-15px, 15px) rotate(3deg) scale(1.02);
    opacity: 0.03;
  }
  50% {
    transform: translate(8px, -10px) rotate(-2deg) scale(0.98);
    opacity: 0.02;
  }
  75% {
    transform: translate(10px, 8px) rotate(3deg) scale(1.01);
    opacity: 0.03;
  }
}

@keyframes gridMove {
  0% { background-position: 0 0; }
  100% { background-position: 30px 30px; }
}

/* 模糊背景叠加 */
.blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(107, 70, 193, 0.05), rgba(0, 0, 0, 0.1));
  pointer-events: none;
  opacity: 0.3;
  z-index: -1;
}

/* 文字涟漪效果 */
:deep(.el-button),
:deep(.el-input__inner),
:deep(h1),
:deep(h2),
:deep(h3),
:deep(p),
:deep(.feature-content) {
  position: relative;
  overflow: hidden;
}

:deep(.el-button)::after,
:deep(.el-input__inner)::after,
:deep(h1)::after,
:deep(h2)::after,
:deep(h3)::after,
:deep(p)::after,
:deep(.feature-content)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(107, 70, 193, 0.3);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

:deep(.el-button):hover::after,
:deep(.el-input__inner):focus::after,
:deep(h1):hover::after,
:deep(h2):hover::after,
:deep(h3):hover::after,
:deep(p):hover::after,
:deep(.feature-content):hover::after {
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  20% {
    transform: scale(25, 25);
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}
</style> 